<template>
  <h1>VuexExample</h1>
  <!-- <button @click="increment">count is: {{ count }}</button> -->
   <button @click="asyncIncrement">count is: {{ count }}</button>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: "VuexExample",
  setup(){
    const store = useStore()
    return {
      // access a state in computed function
      count: computed(() => store.state.count),
      increment: () => store.commit('increment'),
      // access an action
      asyncIncrement: () => store.dispatch('asyncIncrement',10)
    }
  },

};
</script>
<style scoped>

</style>
